<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>21组件双向绑定</title>
</head>
<body>
<div id="app">
    <!--父组件自身双向绑定简写体-->
    <input type="text" v-model="message" />
    <!--父组件自身双向绑定完整体-->
    <input type="text" v-bind:value="message" v-on:input="message = $event.target.value" />
    {{ message }}
    <br>
    <!--写法1-->
    <!--<inner-button-counter01 v-bind:parent-message="message"></inner-button-counter01>-->
    <!--写法2，为了能在子组件中对父组件的属性进行双向绑定需要改成写法2-->
    <!--子组件对父组件的属性双向绑定01-->
    <inner-button-counter01 v-model:parent-message="message"></inner-button-counter01>
</div>
<script src="../vue.global.3.0.5.js"></script>
<script>
    //创建局部组件(推荐)
    const innerButtonCounter01 = {
        data() {
            return {message: "子组件Vue3.x"}
        },
        computed: {
            abc: {
                get() {
                    return this.parentMessage;
                },
                set(value) {
                    this.$emit('update:parentMessage', value);
                }
            }
        },
        //prop通信
        props: ["parentMessage"],
        template: `
            <input type="text" v-model="message" />
            <!--子组件对父组件的属性双向绑定02-->
            <input type="text" v-bind:value="parentMessage" v-on:input="$emit('update:parentMessage', $event.target.value)" />
            <!--子组件对父组件的属性双向绑定03-->
            <input type="text" v-model="abc" />
            <div>{{ message }}</div>
            <div>{{ parentMessage }}</div>
        `
    }

    //1、创建一个Vue应用实例，本身是最顶层的根组件
    const app = Vue.createApp({
        data() {
            return { message: "父组件message"}
        },
        //定义一个局部组件，本组件是根组件的子组件(推荐)
        components: {
            "inner-button-counter01": innerButtonCounter01
        }
    });
    //2、定义一个全局组件
    app.component('button-counter', {
        //数据
        data() {
            return {counter: 100}
        },
        //模板
        template: `
            计算器: {{counter}}
            <button v-on:click="counter++">counter++</button><br>
        `   
    });
    //3、挂载
    const vm = app.mount("#app");
</script>
</body>
</html>